<template>
  <div class="flex justify-center items-center gap-2.5 overflow-hidden">
    <!-- <common-link :path="page-1 === 1 ? link : pageLink"
      v-if="page>1"
      :params="page-1 === 1 ? {} : { page: page-1 }"
      :query="query"
      class="flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300">
      <svg-icon className="text-sm"
        iconName='arrow_left'></svg-icon>
    </common-link>
    <common-link :path="link"
      :query="query"
      v-if="pageList[0] >= 2"
      class="hidden sm:flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-sm text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300">
      1
    </common-link>
    <common-link :path="prevStepPage === 1 ? link : pageLink"
      :params="{page: prevStepPage}"
      :query="query"
      v-if="pageList[0] > 2"
      class="hidden sm:flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-sm text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300 group">
      <i class="el-icon-more group-hover:hidden"></i>
      <i class="el-icon-d-arrow-left hidden group-hover:block"></i>
    </common-link> -->
    <template v-for="(item,key) in pageList">
      <common-link :path="item === 1 ? link : pageLink"
        :key="key"
        :params="item === 1 ? {} : { page: item }"
        :query="query"
        v-if="item!==page"
        class="flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-sm text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300">
        {{item}}
      </common-link>
      <span class="flex items-center justify-center h-12 min-w-12 p1 border rounded  text-sm font-bold border-purple-1300 bg-purple-1300 text-white"
        v-else>
        {{item}}
      </span>
    </template>

    <!-- <common-link :path="pageLink"
      :params="{ page: nextStepPage }"
      :query="query"
      class="hidden sm:flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-sm text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300 group"
      v-if="last_page - pageList[pageList.length-1] >= step">
      <i class="el-icon-more group-hover:hidden"></i>
      <i class="el-icon-d-arrow-right hidden group-hover:block"></i>
    </common-link>
    <common-link :path="pageLink"
      :params="{ page: last_page }"
      :query="query"
      v-if="last_page - pageList[pageList.length-1] >= step - 1"
      class="hidden sm:flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-sm text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300">
      {{last_page}}
    </common-link>
    <common-link :path="pageLink"
      v-if="page < last_page"
      :params="{ page: page + 1 }"
      :query="query"
      class="flex items-center justify-center h-12 min-w-12 p1 border rounded border-gray-3000 text-black font-bold hover:border-purple-1300 hover:bg-purple-1000 hover:text-purple-1300">
      <svg-icon className="text-sm"
        iconName='arrow_right_purple2'></svg-icon>
    </common-link> -->
  </div>
</template>

<script>
export default {
  name: 'LinkPagination',
  props: {
    order_by: {
      type: String | null,
      default: null,
    },
    direction: {
      type: String | null,
      default: '',
    },
    link: {
      type: String,
      require: true,
    },
    pageLink: {
      type: String,
      require: true,
    },
    page: {
      type: Number,
      default: 1,
    },
    step: {
      type: Number,
      default: 2,
    },
    last_page: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    pageList() {
      let startPage = Math.max(this.page - this.step, 1)
      let endPage = Math.min(this.page + this.step, this.last_page)

      const extraPagesNeededStart = Math.max(
        this.step - (this.page - startPage),
        0
      )
      const extraPagesNeededEnd = Math.max(this.step - (endPage - this.page), 0)

      startPage = Math.max(
        startPage - extraPagesNeededEnd - extraPagesNeededStart,
        1
      )
      endPage = Math.min(
        endPage + extraPagesNeededStart + extraPagesNeededEnd,
        this.last_page
      )

      return Array.from(
        { length: endPage - startPage + 1 },
        (_, i) => startPage + i
      )
    },
    prevStepPage() {
      return Math.max(this.page - this.step * 2 - 1, 1)
    },
    nextStepPage() {
      return Math.min(this.page + this.step * 2 + 1, this.last_page)
    },
    query() {
      let query = {}
      if (this.order_by) {
        query.sort = this.order_by
      }
      if (this.direction) {
        query.order = this.direction
      }
      return query
    },
  },
  methods: {},
}
</script>